<template>
    <div>
      <div style="display:flex;justify-content: center;position: relative;">

        <div style="position: absolute;top:-120px;width:1200px">
        <div style="height:60px;background-color:#fff;width:120px;display:flex;justify-content:center;align-items:center;border-radius:6px;border-bottom-left-radius:0;border-bottom-right-radius:0;color:#6593f3;font-weight:bold">
          铁路整柜
        </div>
        <div style="height:120px;width:100%;background-color:#fff;border-radius: 6px;padding:30px;box-shadow: 0 3px 4px rgba(0, 21, 41, 0.08);border-top-left-radius:0;;display:flex">
          <div style="">
            <div>
              起始地
            </div>
            <div>
              <el-select v-model="value1" placeholder="选择起始地" style="width: 120px" class="no-border">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
          </div>
          <div style="height:100%;width:1px;background-color:#ccc;margin:0 120px"></div>
          <div style="">
            <div>
              目的地
            </div>
            <div>
              <el-select v-model="value2" placeholder="选择目的地" style="width: 120px" class="no-border">
                <el-option
                  v-for="item in options2"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
          </div>
          <div style="height:100%;width:1px;background-color:#ccc;margin:0 120px"></div>
          <div>
            <div>
              出运日期
            </div>
            <div style="width: 100px;" class="no-border1">
              <el-date-picker
                v-model="value"
                type="date"
                placeholder="选择日期"
              />
            </div>
          </div>
          <div style="flex:1;display:flex;justify-content:space-between">
            <div></div>
            <el-button type="primary" style="height:100%;width:180px;font-size:16px" @click="">搜索</el-button>
          </div>
        </div>
        </div>
      </div>

        <div style="width: 100%;display: flex;justify-content: center;margin-top: 50px;">
          <div style="width: 1200px;padding: 50px 0;font-weight: bold;">
            <div style="display: flex;justify-content: center;">
              <img src="../../img/1721033642218.png" alt="">
            </div>
            <div style="text-align: center;margin-top: 10px;">
                由于近期市场价格变动频繁，实时运价请联系在线客服！
            </div>
            <div style="text-align: center;margin-top: 10px;">
              7*24小时客服电话 <span style="color: #3d73dd;">400-888-888</span>
            </div>
        </div>
        </div>
      <div style="width: 100%;">
        <!-- <div style="width: 1200px;"> -->
          <Foot />
        <!-- </div> -->
      </div>
    </div>
</template>

<script setup lang="ts">
import Foot from './foot.vue'
import {  h,onMounted,ref,shallowRef } from 'vue'
import { useRouter, useRoute } from "vue-router"
import { ArrowRight } from '@element-plus/icons-vue'
import { baseURL_dev } from '../config/baseUrl'
const searchList = ref([])
const router = useRouter();
const route = useRoute();
let type = ref('')
onMounted(() => {
  console.log('route',route.query)
  // searchList.value = JSON.parse(route.query.list)
  // type.value = route.query.type
  // console.log('searchList',searchList.value)
  // console.log('type',type.value)
})

const customPrefix = shallowRef({
  render() {
    return h('p', '')
  },
})

const value = ref('')
const value1 = ref('')
const value2 = ref('')

const options = [
  {
    value: '1',
    label: '起始地1',
  }
]

const options2 = [
  {
    value: '1',
    label: '目的地1',
  }
]

const toProducts = async (i)=>{
    console.log(i)
    router.push('/myProduct')
  }

  const toCaseDetail = async(item) => {
    router.push('/caseDetail?item='+JSON.stringify(item))
}
</script>

<style scoped lang="less">
.product{
    background-size: 100% 100%;
    height:200px;
    border-top-left-radius:10px;
    border-top-right-radius:10px
  }

  .cardhover{
    margin-top: 50px;
    width:30%;
    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
    border-radius:10px;
    cursor: pointer;
  }
  .cardhover:hover{
    background-color: #1c65fe;
    color: #fff;
    .cardtext{
      color: #fff;
    }
    .cardbtn{
      color: #3570ff;
    }
  }
  .cardtext{
    color:#cecece;
    margin-top:20px;
    font-size:12px
  }
  .cardbtn{
    height:35px;
  }

  .no-border1{
  :deep .el-input__wrapper {
    box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
  }
 
  :deep .el-input__suffix {
    box-shadow:none !important;
    display: none !important;
  }
  :deep .el-input__wrapper.is-focus {
    box-shadow: none !important;
    border: none !important;
    outline: 0 !important;
  }
}
.no-border{
    :deep(.el-select__wrapper) {
      box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
      cursor: default;
      .el-input__inner {
        cursor: default !important;
      }
    }
}
  .inputDeep {
    :deep(.el-input__wrapper) {
      box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
      cursor: default;
      .el-input__inner {
        cursor: default !important;
      }
    }
  }
</style>